<!-- 待阅卷 -->
<template>
  <div class="box">
    <!-- <p>请选择考场！</p> -->
    <ul class="flex wrap parper">
      <li
        class="item-parper flex align between"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="item-name">
          <div class="item-self">
            <span>考场名称：</span>{{ item.exam_room_name }}
          </div>
          <div class="item-self">
            <span>报考专业：</span>{{ item.subject_name }}
          </div>
        </div>
        <el-button
          class="btns"
          @click="into(item.exam_room_id, item.exam_room_name)"
          >进入考场</el-button
        >
      </li>
    </ul>
  </div>
</template>

<script>
import { getExamRoom } from "@/api/apiData";
import Mixin from "@/mixin/index.js";
export default {
  name: "waitParper",
  components: {},
  mixins: [Mixin],
  data() {
    return {
      list: [],
    };
  },
  computed: {},
  methods: {
    //   进入阅卷
    into(id, name) {
      this.$router.push({
        name: "parperOff",
        query: {
          name: name,
          id: id,
        },
      });
    },
    // 获取考场列表
    getExam() {
      const that = this;
      getExamRoom({
        exam_type:2
      }).then((res) => {
        //(res);
        if (res.code == 1) {
          this.list = res.data;
        } else {
          if (!res) return;
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getExam();
    });
  },
};
</script>
<style lang='less' scoped>
.box::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}
.box {
  padding: 40px 50px;
  background: #f6f9fc;
  width: 100%;
  height: 90vh;
  overflow-y: scroll;
  p {
    color: #1d1b1b;
    font-size: 28px;
  }
  .parper {
    .item-parper {
      width: 32%;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 6px 20px rgba(166, 174, 181, 0.18);
      margin: 0 2% 40px 0;
      background: #fff;
      .item-name {
        width: 75%;
        font-size: 26px;
        color: #111;
        .item-self:first-child {
          margin-bottom: 20px;
        }
        .item-self {
          span {
            color: #aaaaaa;
          }
        }
      }
    }
    .item-parper:nth-child(3n) {
      margin-right: 0;
    }
    .btns {
      display: block;
      font-size: 24px;
      color: #fff;
      background: linear-gradient(to right, #fc7e71, #d94c3c);
    }
  }
}
</style>